ПЕДАГОГИЧЕСКОЕ СООБЩЕСТВО
НАШЕМУ СООБЩЕСТВУ ИСПОЛНИЛОСЬ 9 ЛЕТ!
Материал на проверке
Пояснительная записка к презентации
Предварительный просмотр презентации
Размещение изображений в HTML-документе Учитель информатики МБОУ «Гимназия №5» г.Брянска Нечаева Юлия Валерьевна
Цель урока: Научиться представлять графические данные на HTML-страницах Изучить атрибуты, используемые для представления изображений в HTML-документе.
Вставка изображений в html-документ
Вставка изображений в html-документ Общая конструкция: <IMG SRC=“имя файла.расширение”> <IMG> (не имеет закрывающегося тэга) SRC=“имя файла.расширение” – указывает, где находится изображение. ! Рекомендуется размещать изображения в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения нужно будет указывать путь к файлу.
Вставка изображений в html-документ Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке. ! <img src=“tigra.jpg”> полный путь
Вставка изображений в html-документ Команда для вставки изображения в документ HTML: <image>image.jpg</img> <img src=“image.jpg”> <body background=“image.jpg”> <img src=“image.jpg”> <img url=“image.jpg”>
Вставка изображений в html-документ Какой путь нужно прописать для вставки изображения tigra.jpg на сайт index.html? <img src=“tigra.jpg”> Какой путь нужно прописать для вставки изображения krolik.jpg на сайт index.html? <img src=“work/images/krolik.jpg”> work site index.html tigra.jpg images krolik.jpg
Рамка вокруг изображения BORDER = число в пикселях от 0 до 10 - определяет рамку вокруг изображения. <img src=“tigra.jpg” border=0> <img src=“tigra.jpg” border=5>
Изменение размеров картинки Атрибуты: WIDTH = ширина (в пикселях или в %) HEIGHT = высота (в пикселях или в %) Пример: <img src=“tigra.jpg” width=297 height=399> Указывайте реальные размеры картинки – так сохраняется первоначальное качество изображения. !
Изменение размеров картинки Что произойдет, если размеры картинки tigra.jpg задать width=399 height=399? (Реальные размеры картинки высота – 399 пикселей, ширина – 297 пикселей)
Изменение размеров картинки Ответ: Изображение увеличится в ширину 1 2 Пример изображения и результат действия тэга с измененными атрибутами 1 2
Размещение изображения ALIGN – определяет способ выравнивания картинки по горизонтали. Пример: <p align=center> <img src=“tigra.jpg”> </p> ALIGN left (по левому краю) center (по центру) right (по правому краю) Изображение нужно помещать в абзац <p>…</p>, а затем абзац выравнивать по левому краю, по центру, правому краю. !
Размещение изображения align=left align=center align=right
Размещение изображения в тексте align=left align=right align=bottom align=middle align=top Использование атрибута ALIGN: Текст обтекает справа Текст обтекает слева по нижней границе строки по верхней границе строки посередине строки
Размещение изображения в тексте <img src=“tigra.jpg” align=left> <p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p> align=left
Размещение изображения в тексте <<img src=“tigra.jpg” align=right> <p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p> align=right
Размещение изображения в тексте <img src=“tigra.jpg” align=lbottom> <p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p> align=bottom
Размещение изображения в тексте <img src=“tigra.jpg” align=middle> <p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p> align=middle
Размещение изображения в тексте <img src=“tigra.jpg” align=top> <p>Тигра - добрый малый, душа общества, всегда готовый учить вас играть в бейсбол, кататься на лыжах, заниматься греблей в то время, как вам больше всего хочется мирно подремать в кресле. </p> align=top
Размещение изображения в тексте HSPACE – отступ в пикселях или % по горизонтали от картинки до других объектов документа. VSPACE – отступ в пикселях или % по вертикали от картинки до других объектов документа. <img src=“tigra.jpg”> <img src=“tigra.jpg” hspace=20 vspace=20>
Размещение изображения в тексте Параметры тега <IMG> регулирующие отступы вокруг изображения: width, height rows, cols hspace, vspace hbuffer, vbuffer iheight, iwidth
Дополнительные атрибуты ALT (альтернативный текст) определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен текстовый режим TITLE определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title Главное не путайте TITLE и ALT. Содержимое ALT отображается, если в браузере отключен показ картинок и, в отличие от TITLE, он является обязательным атрибутом. !
Дополнительные атрибуты <img src=“tigr.jpg”> Вставка изображения <img src=“tigr1.jpg”> Если допущена ошибка в названии файла <img src=“tigr1.jpg” alt=“тигр”> Допущена ошибка в названии файла и добавлен атрибут alt <img src=“tigr.jpg” title=“тигр”> При наведении мышки на изображение всплывает подсказка
Дополнительные атрибуты Код для вывода подобного изображения с подсказкой: Тигра <img src=“tigra.jpg” alt=“tigra”> <img src=“tigra.jpg” alt=“Тигра”> <img src=“tigra.jpg” title=“Тигра”> <img src=“tigra.jpg” alt=“Тигра” title=“тигр”>
Администрация сайта «УРОК.РФ»
Администрация сайта «УРОК.РФ»
Ефимова Надежда Михайловна
Администрация сайта «УРОК.РФ»
Кожухарь Татьяна Юрьевна
Администрация сайта «УРОК.РФ»